import SignUpBtn from './SignUpBtn'

export default function Testimonials() {
  return (
    <section className="bg-[#ff5c5c] py-12 md:py-16">
      <div className="container mx-auto px-4 md:px-6">
        <div className="grid gap-6 md:grid-cols-2 md:gap-12">
          <div>
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl">What Our Customers Say</h2>
            <div className="mt-6 space-y-4">
              <div className="bg-[#ff6b6b] rounded-lg p-4">
                <p className="text-lg">
                  "RedGrowth has been a game-changer for our business. The real-time insights and alerts have helped us
                  stay ahead of the curve and make informed decisions."
                </p>
                <div className="mt-4 flex items-center space-x-3">
                  <svg aria-hidden="true" className="h-6 w-6 fill-slate-50 group-hover:fill-slate-50">
                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
                  </svg>
                  <div>
                    <div className="font-medium">Jane Doe</div>
                  </div>
                </div>
              </div>
              <div className="bg-[#ff6b6b] rounded-lg p-4">
                <p className="text-lg">
                  "I've been using RedGrowth for months and it's been a game-changer for my business. The insights and
                  alerts have helped me stay on top of the latest trends and opportunities."
                </p>
                <div className="mt-4 flex items-center space-x-3">
                  <svg aria-hidden="true" className="h-6 w-6 fill-slate-50 group-hover:fill-slate-50">
                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
                  </svg>
                  <div>
                    <div className="font-medium">John Smith</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="flex items-center justify-center">
            <SignUpBtn />
          </div>
        </div>
      </div>
    </section>
  )
}
